<template>
  <div class="flex">
    <TheEcharts
      :echartData="echartData"
      :echartsWidth="echartsWidth"
      :echartsHeight="echartsHeight"
      :xCompany="xCompany"
      :yCompany="yCompany"
      :id="id"
      :xAxisData="xAxisData"
    ></TheEcharts>
    <TheEcharts
      :echartData="echartData"
      :echartsWidth="echartsWidth"
      :echartsHeight="echartsHeight"
      :xCompany="xCompany"
      :yCompany="yCompany"
      :id="ids"
      :xAxisData="xAxisData"
    ></TheEcharts>
  </div>
</template>

<script>
export default {
  data() {
    return {
      echartData: [
        {
          name:'2020',
          type:'line',
          data:[100,138,350,180,150,180,230]
        },
        {
          name:'2021',
          type:'line',
          data:[233,233,200,180,199,233,180]
        },
      ],
      echartsWidth: "400px",
      echartsHeight: "500px",
      xCompany: "月",
      yCompany: "万",
      xAxisData:[1,2,3,4,5,6,7,8],
      id:"myChart",
      ids:'myCharts'
    };
  },
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: space-around;
}
</style>